<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/empty_page.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:52 GMT -->
<head>
	<#include "../common/layout/head.ftl" >
	<#include "../common/base/base_css.ftl" >
	<#include "../common/base/base_js.ftl" >
</head>

<body class="gray-bg">
    <div class="row wrapper border-bottom white-bg page-heading">
	    <div class="wrapper wrapper-content">
	        <div class="row">
	    		<div class="panel-body" style="padding-bottom:0px;">
	        <div class="panel panel-default">
	            <div class="panel-heading">查询条件</div>
	            <div class="panel-body">
	                <form id="formSearch" action="javascript:void(0)" 	 class="form-horizontal" onsubmit="BaseAction.refreshTable('tb_users');">
	                    <div class="form-group" style="margin-top:15px">
	                        <label class="control-label col-sm-1" for="name">用户名</label>
	                        <div class="col-sm-3">
	                            <input type="text" class="form-control" id="name">
	                        </div>
	                        <div class="col-sm-4" style="text-align:left;">
	                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">
	                            	<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
	                            </button>
	                        </div>
	                    </div>
	                </form>
	            </div>
	        </div>       
	        <div id="toolbar" class="btn-group">
	        	<button  id="btn_add"  type="button" class="btn btn-outline btn-default" title="添加">
                    <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                </button>
                 <button id="btn_edit"  type="button" class="btn btn-outline btn-default" title="修改">
                    <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
                </button>
                <button id="btn_delete"  type="button" class="btn btn-outline btn-default" title="删除">
                    <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                </button>
                <button  type="button" class="btn btn-outline btn-default"  title="收藏">
                    <i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
                </button>
                
                <button  type="button" class="btn btn-outline btn-default" title="移除">
                    <i class="glyphicon glyphicon-remove" aria-hidden="true"></i>
                </button>
                <button  type="button" class="btn btn-outline btn-default" title="刷新">
                    <i class="glyphicon glyphicon-refresh" aria-hidden="true"></i>
                </button>
                <button  type="button" class="btn btn-outline btn-default" title="下载">
                    <i class="glyphicon glyphicon-download-alt" aria-hidden="true"></i>
                </button>
                <button  type="button" class="btn btn-outline btn-default" title="设置">
                    <i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
                </button>
               
                
	        </div>
	        <table id="tb_users"></table>
	    			
	        </div>
    </div>
    
    
    
    
    <script>
    		$(function () {
				console.info('初始化Table');	
			    //1.初始化Table
			    var oTable = new TableInit();
			    oTable.Init();
				console.info('初始化Button的点击事件')
			    //2.初始化Button的点击事件
			    var oButtonInit = new ButtonInit();
			    oButtonInit.Init();
			
			});
			
			
			var TableInit = function () {
			    var oTableInit = new Object();
			    //初始化Table
			    oTableInit.Init = function () {
			        $('#tb_users').bootstrapTable({
			            url: 'user/data',         //请求后台的URL（*）
			            method: 'post',                      //请求方式（*）
			            toolbar: '#toolbar',                //工具按钮用哪个容器
			            striped: true,                      //是否显示行间隔色
			            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			            pagination: true,                   //是否显示分页（*）
			            sortable: true,                     //是否启用排序
			            sortOrder: "asc",                   //排序方式
			            queryParams: oTableInit.queryParams,//传递参数（*）
			            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
			            pageNumber:1,                       //初始化加载第一页，默认第一页
			            pageSize: 10,                       //每页的记录行数（*）
			            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
			            search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
			            strictSearch: true,
			            showColumns: true,                  //是否显示所有的列
			            showRefresh: true,                  //是否显示刷新按钮
			            minimumCountColumns: 2,             //最少允许的列数
			            clickToSelect: true,                //是否启用点击选中行
			            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
			            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
			            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
			            cardView: false,                    //是否显示详细视图
			            detailView: false,                   //是否显示父子表
			            columns: [{
			                checkbox: true
			            }, {
			                field: 'name',
			                title: '序号',
			                align: 'center',
		                    valign: 'left',
			                formatter: function(value,row,index){  
		                    	return index+1;
		                    }
			            },{
			                field: 'account',
			                title: '账号',
			                align: 'center',
		                    valign: 'left',
		                    sortable: true,
			            }, {
			                field: 'nickName',
			                align: 'center',
		                    valign: 'left',
		                    sortable: true,
			                title: '昵称'
			            }, {
			                field: 'email',
			                align: 'center',
		                    valign: 'left',
		                    sortable: true,
			                title: '邮件'
			            }, {
			                field: 'phone',
			                align: 'center',
		                    valign: 'left',
		                    sortable: true,
			                title: '手机号码'
			            }, {
                            field: 'status',
                            align: 'center',
                            valign: 'left',
                            sortable: true,
                            title: '状态',
                            formatter: function(value,row,index){
                            	var statusArray=['未激活','正常','锁定'];
                                return statusArray[value];
                            }
                        },
                            {
			                field: 'opreateTime',
			                title: '操作时间',
			                align: 'center',
		                    valign: 'left',
		                    sortable: true,
		                    formatter: function(value,row,index){  
		                    	return moment(value).format('YYYY-MM-DD HH:mm:ss');;
		                    }
			            }, ]
			        });
			    };
			
			    //得到查询的参数
			    oTableInit.queryParams = function (params) {
			    	//扩展查询参数
			    	params.name=$("#name").val();
			        console.info('上送分页信息',params)
			        return params;
			    };
			    console.info(oTableInit)
			    return oTableInit;
			};
			
			var ButtonInit = function () {
			    var oInit = new Object();
			    var postdata = {};
			
			    oInit.Init = function () {
			        //初始化页面上面的按钮事件
			        $('#btn_add').click(function(){
			        	console.info('添加');
			        	
			        });
			        $('#btn_save').click(function(){
			        	console.info('保存数据');
			        	
			        });
			        $('#btn_edit').click(function(){
			        	console.info('修改');
			        	
			        });
			        $('#btn_delete').click(function(){
			        	console.info('删除');
			        	
			        });
			        $('#btn_query').click(function(){
			        	console.info('查询');
			        	$('#tb_users').bootstrapTable('refresh');
			        });
			    };
			
			    return oInit;
			};
    
    </script>
</body>
</html>
